import CommonModal from '@/components/CommonModal';
import { Button } from 'antd';
import QRCode from 'qrcode.react';
import BarCode from './BarCode';
import { printCard } from '@/utils/print.jsx';
import styles from './index.module.less';
import { find } from 'lodash';

const goodsInfoMap = {
  goodsName: '订单商品名称',
  goodsSpce: '订单规格属性',
  spuId: '订单款式编码',
  goodsId: '订单商品编码',
};

const order = {
  goodsName: '这是订单商品名称11111111',
  goodsSpce: '这是订单规格属性2222222',
  spuId: '这是订单款式编码3333333333',
  goodsId: '这是订单商品编码4444444444',
};

const PreviewImg = ({ visible, source, attrList, sizeScale, handleCancel }) => {
  const { totalWidth, totalHeight, templateValue = [] } = source;

  //px 单位级别
  const modalWidth = totalWidth * sizeScale;
  const editHeight = totalHeight * sizeScale;

  // printCard({type: 2, data: {...source, templateValue:JSON.stringify(source.templateValue)} })

  //渲染item 主体部分
  const renderMainMsg = (v) => {
    const { type, props, prop, value, width, height } = v;
    // const propItem =
    //   attrList.length > 0 && find(attrList, ['attributeName', prop]);
    if (type == 'text') {
      const arr =
        props && props.map((prop) => `${goodsInfoMap[prop]}：${order[prop]}`);
      return (
        <>
          {arr && arr.join('；')}
          {prop ? (
            <div>
              <div>{`${prop}: 这是${prop}`}</div>
            </div>
          ) : (
            ''
          )}
        </>
      );
    } else if (type == 'customtext') {
      return value;
    } else if (type == 'qrcode') {
      return <QRCode value={value} size={width} fgColor="#000000" />;
    } else if (type == 'barcode') {
      return <BarCode value={value} height={height} displayValue={true} />;
    } else if (type == 'picture') {
      return <img src={value} alt="" style={{ width, height }} />;
    }
  };

  return (
    <CommonModal
      title="预览"
      width={Math.max(modalWidth + 48, 475)}
      visible={visible}
      onCancel={handleCancel}
      maxHeight="1000px"
      footer={[
        <Button key="save" onClick={handleCancel}>
          关闭
        </Button>,
      ]}
    >
      <div
        style={{
          width: '100%',
          height: Math.max(editHeight, 300),
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: totalWidth * sizeScale,
            height: totalHeight * sizeScale,
            background: '#FFFFFF',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0px 0px 10px rgb(79 94 112 / 10%)',
          }}
        >
          {templateValue.map((v) => {
            return (
              <div
                key={v.id}
                className={styles.dragItem}
                style={{ ...v, background: '#FFFFFF', cursor: 'default' }}
              >
                <div className={styles.renderMsg}>{renderMainMsg(v)}</div>
              </div>
            );
          })}
        </div>
      </div>
    </CommonModal>
  );
};

export default PreviewImg;
